<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link href="./css/index.css" rel="stylesheet" type="text/css"  />
</head>

<body>
<div id="app">
    <div class="title">
        <i class="jiantou" @click='tiaozhuan'></i><i class="index"></i><span>学生离校请假详细</span><i class="fenxiang" @click='changeShow'></i>
    </div>
    <div class="subject">
        <div class='pic_title'><i></i><span class="one"><input type="text" v-model='mingZi' v-show='IsShow'><span v-show='!IsShow'>{{ mingZi }}</span>的学生离校请假</span><span class="two">已通过</span></div>
        <div class="text_title">申请详细</div>
        <ul class="list">
            <li><span class="one">审批编号</span><input type="text" v-model='spbh' v-show='IsShow'><span class="two" v-show='!IsShow'>{{ spbh }}</span></li>
            <li><span class="one">提交时间</span><input type="text" v-model='tjsj' v-show='IsShow'><span class="two" v-show='!IsShow'>{{ tjsj }}</span></li>
            <li><span class="one">所在部门</span><input type="text" v-model='szbu' v-show='IsShow'><span class="two" v-show='!IsShow'>{{ szbu }}</span></li>
            <li><span class="one">请假类型</span><input type="text" v-model='qjlx' v-show='IsShow'><span class="two" v-show='!IsShow'>{{ qjlx }}</span></li>
            <li><span class="one">开始时间</span><input type="text" v-model='kssj' v-show='IsShow'><span class="two" v-show='!IsShow'>{{ kssj }}</span></li>
            <li><span class="one">结束时间</span><input type="text" v-model='jssj' v-show='IsShow'><span class="two" v-show='!IsShow'>{{ jssj }}</span></li>
            <li><span class="one">请假时长</span><input type="text" v-model='qjsc' v-show='IsShow'><span class="two" v-show='!IsShow'>{{ qjsc }}</span><div class="js"><span class="three">当前计算时长为自动计算，</span><span class="four">查看时长明细</span></div></li>
            <li><span class="one">请假事由</span><input type="text" v-model='qjsy' v-show='IsShow'><span class="two" v-show='!IsShow'>{{ qjsy }}</span></li>
            <li><span class="one">交通工具</span><input type="text" v-model='jtgj' v-show='IsShow'><span class="two" v-show='!IsShow'>{{ jtgj }}</span></li>
            <li><span class="one">出行路线</span><input type="text" v-model='cxlx' v-show='IsShow'><span class="two" v-show='!IsShow'>{{ cxlx }}</span></li>
            <li class="zfb"><span class="one">说明附件<p>(支付宝建</p><p>康码截图)</p></span><span class="pic"></span></li>
        </ul>
    </div>
    <div class="hengTiao"></div>
    <div class="subject">
        <div class="liucheng">
            <div class="yty">已同意 · <span v-show='!IsShow'>{{ yty }}</span> 15:28 <input type="text" v-model='yty' v-show='IsShow'></div>
            <div class="ycs">已抄送 · <span v-show='!IsShow'>{{ ycs }}</span> 15:28 <input type="text" v-model='ycs' v-show='IsShow'></div>
        </div>
    </div>
    <div class="hengTiao"></div>
    <div class="tjbz"><i></i><span>添加备注</span></div>
    <div class="hengTiao" style="margin-bottom: 49px;"></div>
    <div class="zctj"><i></i><span>再次提交</span></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el:'#app',
        data: {
            IsShow: true,
            spbh: '',
            tjsj: '',
            szbu: '',
            qjlx: '',
            kssj: '',
            jssj: '',
            qjsc: '',
            qjsy: '',
            jtgj: '',
            cxlx: '',
            mingZi:'',
            yty: '',
            ycs: ''
        },
        methods: {
            changeShow:function(){
                this.IsShow = !this.IsShow
            },
            tiaozhuan:function(){
                window.location = "./shpuye.html"
            }
        }
    })
</script>
</body>
</html>